<template>
  <!-- 哈希值弹窗 -->
  <van-popup
    class="pkUpgrade"
    v-model:show="props.show"
    :style="{
      width: '80%',
      'background-color': 'transparent',
    }"
    zIndex="99999"
    teleport="body"
    :close-on-click-overlay="false"
  >
    <!-- 容器 -->
    <div class="box">
      <!-- 卡片布局 -->
      <div class="box-list items-center">
        <div class="box-list-item" v-for="(item, index) in cards" :key="index">
          <img
            class="box-list-item-bg"
            src="/image/lotterymoney/hashpk-yjkk-icon.svg"
          />
          <div class="box-list-item-value">
            {{
              item.transactionHash.substring(
                item.transactionHash.length - hashScoreLengthCur,
                item.transactionHash.length
              )
            }}
          </div>
        </div>
      </div>
      <!-- 确认按钮 -->
      <div class="btn" @click="confirm">{{ $t("common.confirm") }}</div>
    </div>
  </van-popup>
</template>
<script setup lang="ts" name="pkUpgrade">
import { ref, reactive, onMounted, computed, nextTick } from "vue";
import { useLotteryMoneyStore } from "~~/store/modules/lottery-money";
import { openMyCardBatch } from "@/api/lottery";

const props = withDefaults(
  defineProps<{
    lottery: any;
    show: boolean;
    cards: any;
  }>(),
  {
    show: false,
    cards: [],
  }
);

const emit = defineEmits(["update:show", "confirm"]);

/**
 * @description: 获取当前得分长度
 */
const hashScoreLengthCur = ref(1); // 当前长度
let pkNumsWatch = watch(
  () => props.lottery,
  (newVal, oldVal) => {
    if (newVal) {
      // 最新直
      if (
        oldVal &&
        newVal.hashPk &&
        oldVal.hashPk &&
        newVal.hashPk.hashScoreLength &&
        newVal.hashPk.hashScoreLength != oldVal.hashPk.hashScoreLength
      ) {
        hashScoreLengthCur.value = newVal.hashPk.hashScoreLength;
      }
      // 刚进到页面,展示一下当前升级到第几位
      else if (
        newVal.hashPk &&
        newVal.hashPk.hashScoreLength &&
        newVal.hashPk.hashScoreLength != hashScoreLengthCur.value
      ) {
        hashScoreLengthCur.value = newVal.hashPk.hashScoreLength;
      }
    }
  },
  {
    deep: true,
  }
);

/**
 * 监听pkTop4Arr, 获取,第一名
 * */
const lotteryMoneyStore = useLotteryMoneyStore();
const firstRank = ref(null); // 第一名

const pkTop4ArrWatch = watch(
  () => lotteryMoneyStore.$state.pkTop4Arr,
  (newVal, oldVal) => {
    // 比较得出第一名
    if (newVal && newVal.length > 1) {
      if (firstRank.value) {
        if (newVal[0].hashScore.length >= firstRank.value.hashScore.length) {
          if (newVal[0].hashScore.length > firstRank.value.hashScore.length) {
            firstRank.value = newVal[0];
          }
          // 长度相等
          else if (newVal[0].hashScore > firstRank.value.hashScore) {
            firstRank.value = newVal[0];
          }
        }
      } else {
        firstRank.value = newVal[0];
      }
    } else if (newVal && newVal.length == 1) {
      if (firstRank.value) {
        // 这种基本不会出现
        if (newVal[0].hashScore > firstRank.value.hashScore) {
          firstRank.value = newVal[0];
        }
      } else {
        firstRank.value = newVal[0];
      }
    }
  },
  {
    immediate: true,
  }
);

onMounted(() => {});
onBeforeUnmount(() => {
  pkNumsWatch && pkNumsWatch();
  pkTop4ArrWatch && pkTop4ArrWatch();
});

// 点击确认
const confirm = () => {
  // 1. 找到最大的得分
  const ids = props.cards.map((element: any) => {
    return element.id;
  });

  openMyCardBatch({ idList: ids });
  closePopup();
};
// 关闭弹窗
const closePopup = () => {
  // https://etherscan.io/tx/0xfcde0e9d888949df20e6c86b8cc4dd0456a3b30fd6f6a44d540d285375d54f00
  emit("update:show", false);
};
</script>
<style lang="scss" scoped>
.pkUpgrade {
  overflow: initial;
  width: 100vw !important;
  max-width: 100vw !important;
  margin: 0;
}
.box {
  margin: 0 50 * 2px;
  background-color: #fff;
  padding-bottom: 1 * 2px;
  border-radius: 12 * 2px;
  &-list {
    padding: 20 * 2px 0 * 2px 10 * 2px 20 * 2px;
    justify-content: center;
    flex-wrap: wrap;
    border-bottom: 0.8px solid rgba(0, 0, 0, 0.1);

    &-item {
      position: relative;
      margin-bottom: 10 * 2px;
      margin-right: 10 * 2px;
      &-bg {
        width: 56 * 2px;
        min-width: 56 * 2px;
        height: 68 * 2px;
      }
      &-value {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }
  }
}
.btn {
  box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.1);
  margin: 10 * 2px 15 * 2px;
  background-color: #007bff;
  color: #fff;
  font-size: 15 * 2px;
  font-weight: 590;
  text-align: center;
  padding: 8 * 2px 0;
  border-radius: 8 * 2px;
}
</style>
